<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title></title>

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/index.css">
    <script  type="text/javascript">

        let ws;
        let wsUri = "ws://localhost:8080/web/echo";
        ws = new WebSocket(wsUri);
        let n='${sessionScope.user.userName}';
        ws.onopen = function(){
            ws.send(n);//在服务端必须由OnMessage接收此消息
        };

        //处理连接后的信息处理  session.getBasicRemote().sendText(message);
        //接收服务器返回的数据
        ws.onmessage = function(message){
            writeToScreen(message.data);
        };
        //对发送按钮进行监听，获取发送的信息和发送对象
        function button(){
            message = document.getElementById('in').value;
            towho = document.getElementById('towho').value + "@";
            ws.send(towho+message);
        }

        //发生错误时，处理错误
        ws.onerror = function (evt){
            writeToScreen('<span style="color:red;">ERROR:</span>'+evt.data);
            ws.close();
        };

        //把信息显示到当前屏幕
        function writeToScreen(message){
            var pre = document.createElement("p");
            pre.style.wordWrap ="break-word";
            pre.style.marginLeft="20px";
            pre.innerHTML = message;

            output.appendChild(pre);
        }

        //当关闭页面时执行ws.close
        window.onbeforeunload=function (){
            ws.close();
        };
    </script>
</head>

<body style="background-image: url('${pageContext.request.contextPath}/style/image/bg5.jpg')">

    <div class="qqBox">
        <!-- xx -->
        <div class="BoxHead">
            <!-- <div class="headImg">
			<img src="./index_files/6.jpg">
		</div> -->

            <div class="internetName"><marquee width=700 direction=left scrollamount=15>世界公屏聊天窗口</marquee></div>
            <div class="tubiao">
                <span><img style="width: 20px; margin: 15px 5px;" src="${pageContext.request.contextPath}/style/picture/xiao.png" alt=""></span>
                <span><img style="width: 20px; margin: 15px 5px;" src="${pageContext.request.contextPath}/style/picture/da.png" alt=""></span>
                <span><img style="width: 20px; margin: 15px 5px;" src="${pageContext.request.contextPath}/style/picture/iocnqx.png" alt=""></span>
            </div>
        </div>
        <!-- 好友聊天类容 -->
        <div class="context" >

            <div class="conLeft">
                <div class="shouBox">
                    <div class="shous">
                        <div style="height: 60px;">
                            <img class="touimg" src="${pageContext.request.contextPath}/style/picture/touxiang3.png" alt="">
                        </div>
                        <div class="txiangName">${sessionScope.userName}</div>
                        <div style="height: 52px;">
                            <img class="caidanImg" src="${pageContext.request.contextPath}/style/picture/caidan.png" alt="">
                        </div>
                    </div>


                    <!-- 搜索 -->

                    <form style="height: 130px;" onsubmit="submitFn(this, event);">
                        <div class="search-wrapper">
                            <div class="input-holder">
                                <input type="text" class="search-input" placeholder="请输入关键词">
                                <button class="search-icon" onclick="searchToggle(this, event);"><span></span></button>
                            </div>
                            <span class="close" onclick="searchToggle(this, event);"></span>
                            <div class="result-container">

                            </div>
                        </div>
                    </form>
                    <!-- 菜单分组 -->
                    <div class="aui-flexView">

                            <div class="aui-tab-box" data-ydui-tab="" style="text-align: center">
                                        <a style="font-size: 20px">好友列表</a> ||<a style="font-size: 20px" href="${pageContext.request.contextPath}/jqr.jsp" style="padding-right: -20px">小薇在线</a>
                            </div>
                    </div>
                </div>
                <ul class="row">

                    <span class="getm" style="padding-top: 300px;padding-left:70px;font-size: 20px">----世界公屏----</span>
                   <hr>
                    <%--<li>
                        <div class="liLeft"><img src="static/picture/20170926103645_04.jpg"></div>
                        <div class="liRight">
                            <span class="intername">前端交流群</span>
                        </div>
                    </li>--%>
                </ul>
            </div>
            <div class="conRight">
                <div class="Righthead">
                    <!-- <div class="headName">赵鹏</div>
				<div class="headConfig">
					<ul>
						<li><img src="./index_files/20170926103645_06.jpg"></li>
						<li><img src="./index_files/20170926103645_08.jpg"></li>
						<li><img src="./index_files/20170926103645_10.jpg"></li>
						<li><img src="./index_files/20170926103645_12.jpg"></li>
					</ul>
				</div> -->
                </div>
                <!-- 显示聊天内容 -->
                <div id="output" class="RightCont" style="background:white;">

                </div>

                <div class="RightFoot">
                    <div class="emjon" style="display: none;">
                        <ul>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_02.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_05.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_07.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_12.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_14.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_16.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_20.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_23.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_25.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_30.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_31.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_33.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_37.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_38.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_40.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_45.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_47.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_48.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_52.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_54.jpg"></li>
                            <li><img src="${pageContext.request.contextPath}/style/picture/em_55.jpg"></li>
                        </ul>
                    </div>
                    <div class="footTop">

                    </div>
                    <div class="inputBox" style="background:white;">
                        <input id="in" name="message" style="width: 819px;height: 75px; border: none;outline: none; resize:none; placeholder:'请输入……'" type="text"></input>
                        <input type="hidden" id="towho"style="width: 100px;height: 30px;margin-top: 10px; " name="towho" value="${param.userName == null ? "all" : param.userName}">

                        <button onclick="button()" value="发送" style="margin-right: 20px;float: left" class="sendBtn">发送(s)</button>

                    </div>

                </div>

            </div>
        </div>
    </div>

    <script type="text/javascript" src="${pageContext.request.contextPath}/style/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/style/js/index.js"></script>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/style/js/jquery.min.js"></script>
<script>
    $(function(){
        $.ajaxSetup({
            complete: function (xhr, status) {
                //拦截器实现超时跳转到登录页面
                // 通过xhr取得响应头
                var REDIRECT = xhr.getResponseHeader("REDIRECT");
                //如果响应头中包含 REDIRECT 则说明是拦截器返回的
                if (REDIRECT == "REDIRECT") {
                    var win = window;
                    while (win != win.top) {
                        win = win.top;
                    }
                    //重新跳转到 login.html
                    win.location.href = xhr.getResponseHeader("CONTENTPATH");
                }
            }
        });

        $.ajax({
            url:"${pageContext.request.contextPath}/FriendController/queryfirend",
            type:"GET",
            data:{pn:1,ps:3},
            dataType:"JSON",
            success:function(data){
                var content="";
                $.each(data.list,function (index,obj) {
                    content+="<li class=\"getn\" data-n=\""+obj.friend.userName+"\">\n" +
                        "                 <div class=\"liLeft\"><img style=\"width:50px;height:50px\" src=\"${pageContext.request.contextPath}/style/image/bg.jpg\"></div>\n" +
                        "                           <div class=\"liRight\">\n" +
                        "                                    <a  class=\"one\" id=\"uname\"  style=\"padding-top:9px\">用户名："+obj.friend.userName+"</a>\n" +
                        "                                    <span  class=\"intername\" style=\"padding-top: 16px;\">个性签名："+obj.friend.userSign+"</span>\n" +
                        "                                </div>\n" +
                        "                            </li><hr>";
                })
                $(".row").append(content);
            }
        });
       $(document).on('click',".getn",function () {
           $("#output").empty();

            var s=$(this).data("n");
            $("#towho").val(s);
        })
        $(document).on('click',".getm",function () {
            $("#output").empty();

            var ss="all";
            $("#towho").val(ss);
        })
    });

</script>
</html>